<template>
  <div id="main">
    <el-row>
      <el-col :span="24">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                 router
                 @select="handleSelect"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b">
          <el-menu-item index="/">Home</el-menu-item>
          <el-menu-item index="/app-1">App-1</el-menu-item>
          <el-menu-item index="/app-2">App-2</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="24">
         <el-form>
           <el-form-item label="当前用户ID">
             <el-input v-model="userId"/>
           </el-form-item>
         </el-form>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div id="subApp"/>
          <router-view/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { registerMicroApps, runAfterFirstMounted, start, initGlobalState } from 'qiankun'

export default {
  name: 'Main',
  data () {
    return {
      activeIndex: '',
      subVisible: true,
      userId: '999',
      stateActions: null
    }
  },
  watch: {
    userId: {
      handler (newV) {
        if (this.stateActions) {
          this.stateActions.setGlobalState({ userId: newV })
        }
      }
    },
    activeIndex: {
      immediate: true,
      handler (newV) {
        if (newV) {
          history.pushState(null, newV, newV)
        }
      }
    }
  },
  mounted () {
    this.initQiankun()
    this.stateActions = initGlobalState({ userId: this.userId })
  },
  methods: {
    initQiankun () {
      registerMicroApps([
        {
          name: 'app-1',
          entry: '//localhost:8083',
          container: '#subApp',
          activeRule: '/app-1'
        },
        {
          name: 'app-2',
          entry: '//localhost:8084',
          container: '#subApp',
          activeRule: '/app-2'
        }

      ],
      {
        beforeLoad: [
          app => {
            // eslint-disable-next-line no-console
            // console.log('before load', app)
          }
        ],
        beforeMount: [
          app => {
            // eslint-disable-next-line no-console
            // console.log('before mount', app)
          }
        ],
        afterUnmount: [
          app => {
            // eslint-disable-next-line no-console
            // console.log('after unload', app)
          }
        ]
      })

      // setDefaultMountApp('/app-1')

      runAfterFirstMounted(() => {
        // eslint-disable-next-line no-console
        console.info('first app mounted')
      })

      start({ prefetch: true })
    },
    handleSelect (key, keyPath) {
      this.activeIndex = key
      this.subVisible = false
      this.$nextTick(() => {
        this.subVisible = true
      })
    }
  }
}
</script>

<style lang="less">
#main {
  font-family: "JetBrains Mono", Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
